<html>
  <head>
    <title></title>
    <style>
    
    toolbar { padding:3dip;
              display:block; flow:horizontal; background:#ddd; }
    toolbar > button { width:16dip; }
    toolbar > button:checked { color:red; }

    htmlarea {
      text-selection-background-color: rgba(64,128,255,0.3);
      text-selection-color: transparent;
    }
    
    </style>
    <script type="text/tiscript">
    
      const htmlarea = $(htmlarea);
      
      const btn_b = $(#btn-b);
      const btn_i = $(#btn-i);
      
      htmlarea.on("statechange", function() {
        const ACTIVE = 0x01;
        const DISABLED = 0x02;
        btn_b.state.checked = htmlarea.queryCommand("format:toggle-span:b|strong") == ACTIVE;
        btn_i.state.checked = htmlarea.queryCommand("format:toggle-span:i|em") == ACTIVE;
      });
      
      event click $(#btn-b) { htmlarea.execCommand("format:toggle-span:b|strong"); return true; }  
      event click $(#btn-i) { htmlarea.execCommand("format:toggle-span:i|em"); return true; }  


      htmlarea << event exec:edit:insert-block-break() { return this.execCommand("edit:insert-break"); }
    
    </script>
  </head>
<body>

<toolbar>
  <button|checkbox #btn-b>B</button>
  <button|checkbox #btn-i>I</button>
</toolbar>
<htmlarea>
  <p>123</p>
  <p>456</p>
  <ol><li>First</li></ol>
</htmlarea>

</body>
</html>
